<template>
  <div class="menu-demo">
    <a-menu :default-selected-keys="['1']">
      <a-menu-item key="0">{{ $t('onlinestudy.menu.item1') }}</a-menu-item>
      <a-menu-item key="1">{{ $t('onlinestudy.menu.item2') }}</a-menu-item>
      <a-menu-item key="2">{{ $t('onlinestudy.menu.item3') }}</a-menu-item>
      <a-menu-item key="3">{{ $t('onlinestudy.menu.item4') }}</a-menu-item>
    </a-menu>
  </div>
</template>

<script lang="ts" setup>
  import { queryMyTeamList, MyTeamRecord } from '@/api/user-center';
  import useRequest from '@/hooks/request';

  const defaultValue: MyTeamRecord[] = new Array(4).fill({});
  const { loading, response: teamList } = useRequest<MyTeamRecord[]>(
    queryMyTeamList,
    defaultValue
  );
</script>

<style scoped>
  .menu-demo {
    box-sizing: border-box;
    width: 100%;
    padding: 0 10px;
    background-color: var(--color-neutral-2);
  }
</style>

<style scoped lang="less">
  .general-card {
    height: 356px;
    .arco-list-item {
      height: 72px;
      padding-left: 0;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--color-neutral-3);
      &:last-child {
        border-bottom: none;
      }
      .arco-list-item-meta {
        padding: 0;
      }
    }
  }
</style>
